<template>
  <div class="basicinfor" v-loading="loading">
    <div class="search d-between">
      <div class="d-start">
        <div class="d-center" style="margin-right:10px;">
          <el-button
            size="medium"
            type="info"
            @click="search()"
            icon="el-icon-refresh"
            style="width:36px;height:36px;padding:0;"
          ></el-button>
          <el-button size="medium" type="primary" @click="add()">新增</el-button>
        </div>
        <div class="d-center" style="margin-right:10px;">
          <el-button size="medium" :type="selectData.length>0?'danger':'info'" @click="del()">删除</el-button>
        </div>
        <div class="d-center" style="margin-right:10px;">
          <el-button
            size="medium"
            type="info"
            plain
            @click="exportExcel"
            v-if="tableData.length"
          >导出Excel</el-button>
        </div>
      </div>
      <div class="d-end top-search">
        
        <div class="input d-center" :title="active">
          <span class="select-gray d-center" >工程地点</span>
          <el-cascader
            size="medium"
            :options="cityList"
            :props="props"
            v-model="selectleap"
            popper-class="citylist"
            ref="elcascader"
            @visible-change="elCascaderOnlick"
            @expand-change="elCascaderOnlick"
            @change="handleChange"
          >
            <!-- @change="handleChange" -->
            <!-- @click="handleChange(data,node)" -->
            <template slot-scope="{  data }">
              <span>{{ data.name }}</span>
              <!-- <span v-if="!node.isLeaf">({{ data.children.length }})</span> -->
            </template>
          </el-cascader>
        </div>
        <div class="input d-center">
          <el-input  size="medium" v-model="name" placeholder="请输入内容">
            <template slot="prepend" >项目名称</template>
          </el-input>
        </div>
        <div class="input d-center" :title="active">
          <span class="select-gray d-center" >项目状态</span>
          <el-select
            size="medium"
            v-model="active"
            placeholder="请选择"
            class="select-enter"
            slot="append"
          >
            <el-option
              :value="item.values"
              :label="item.keys"
              v-for="item in resdata.xmzt"
              :key="item.id"
            ></el-option>
          </el-select>
        </div>
        <div class="input d-center">
          <span class="select-gray d-center" >行政等级</span>
          <el-select
            size="medium"
            v-model="xzdj"
            placeholder="请选择"
            class="select-enter"
            slot="append"
          >
            <el-option
              :value="item.values"
              :label="item.values"
              v-for="item in xmLevel"
              :key="item.values"
            ></el-option>
          </el-select>
        </div>
        <div class="input d-center">
          <span class="select-gray d-center" >路面类型</span>
          <el-select
            size="medium"
            v-model="lmlx"
            placeholder="请选择"
            class="select-enter"
            slot="append"
          >
            <el-option
              :value="item.values"
              :label="item.keys"
              v-for="item in resdata.lmlx"
              :key="item.id"
            ></el-option>
          </el-select>
        </div>
        <div class="d-center" style="margin-left:10px;">
          <el-button size="medium" type="info" plain @click="page = 1;search()">搜索</el-button>
          <!-- icon="el-icon-search"
          style="width:36px;height:36px;padding:0;"-->
        </div>
        <div class="d-center" style="margin-left:10px;">
          <el-button
            size="medium"
            type="info"
            plain
            @click="page = 1;name = '';active = '';selectleap=[];gcdd_sj=null;gcdd_qx=null;lmlx='';xzdj='',search()"
          >重置</el-button>
        </div>
      </div>
    </div>
    <div class="main">
      <el-table
        ref="table"
        :data="tableData"
        style="width: 100%;"
        height="100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50" align="center" :selectable="selectable"></el-table-column>
        <el-table-column prop="date" label="地图定位" width="100" align="center">
          <template slot-scope="scope">
            <i @click="local(scope.row)" style="cursor:pointer;">
              <img src="@/assets/img/ic_location_blue.png" alt />
            </i>
            <!-- <span>地图定位</span> -->
          </template>
        </el-table-column>
        <el-table-column label="序号" width="50" align="center">
          <template slot-scope="scope">
            <span>{{(scope.$index + 1)+((page-1)*pageSize)}}</span>
          </template>
        </el-table-column>

        <el-table-column label="项目名称" width="200" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-link type="primary" @click="look(scope.row)">{{scope.row.xmmc}}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="jszt" label="建设主体" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column label="工程地点" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <span>{{(scope.row.gcdd_sj)}}</span>
            <span v-if="scope.row.gcdd_qx">/{{scope.row.gcdd_qx}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="xmzh" label="项目指挥" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="xmzt" label="项目状态" align="center"></el-table-column>

        <el-table-column label="建设规模（km）" align="center">
          <el-table-column label="合计" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{scope.row.wujl.toFixed(3)}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="yijl"
            label="一级"
            align="center"
            show-overflow-tooltip
            :formatter="formatter1"
          ></el-table-column>
          <el-table-column
            prop="erjl"
            label="二级"
            align="center"
            show-overflow-tooltip
            :formatter="formatter1"
          ></el-table-column>
          <el-table-column
            prop="sanjl"
            label="三级"
            align="center"
            show-overflow-tooltip
            :formatter="formatter1"
          ></el-table-column>
          <el-table-column
            prop="sijl"
            label="四级"
            align="center"
            show-overflow-tooltip
            :formatter="formatter1"
          ></el-table-column>
          <!-- <el-table-column
            prop="wujl2"
            label="五级"
            align="center"
            show-overflow-tooltip
            :formatter="formatter1"
          ></el-table-column> -->
        </el-table-column>
        <el-table-column label="概算投资（万元）" align="center">
          <el-table-column
            prop="gsze"
            label="合计"
            align="center"
            :formatter="formatter2"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="zycgs"
            label="中央车购税"
            align="center"
            :formatter="formatter2"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="sczzj"
            label="省财政资金"
            align="center"
            :formatter="formatter2"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="ysze"
            label="地方建设资金"
            align="center"
            :formatter="formatter2"
            show-overflow-tooltip
          ></el-table-column>
        </el-table-column>
        <el-table-column
          prop="update_time"
          label="最后修改时间"
          align="center"
          show-overflow-tooltip
          width="200"
        >
          <template slot-scope="scope">
            <span>{{scope.row.update_time || scope.row.create_time}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="200">
          <template slot-scope="scope">
            <el-button
              size="medium"
              type="primary"
              plain
              @click="edit(scope.row)"
              v-if="scope.row.is_sealed == 1"
            >编辑</el-button>
            <el-button
              size="medium"
              type="danger"
              plain
              @click="Sealed(scope.row)"
              v-if="scope.row.is_sealed == 1"
            >封存</el-button>
            <el-button size="medium" type="info" plain v-else>已封存</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      class="d-center"
      style="margin-top:10px"
      :page-size="pageSize"
      :current-page="page"
      @current-change="handleCurrentChange"
    ></el-pagination>
    <!-- <div class="notify">
      <div class="inner">
        <div class="success">
          <div class="header">
            <i class="el-icon-check" style="color:white;background:#67C23A;"></i>
            <span>2项,删除成功</span>
          </div>
          <div class="main">
            <span>项目名称一</span>
            <span>项目名称dad一项目名称dad一</span>
            <span>项目项目名称dad一项目名项目项</span>
          </div>
        </div>
        <div class="error">
          <div class="header">
            <i class="el-icon-close" style="color:white;background:#F56C6C;"></i>
            <span style="color:#F56C6C;">2项,删除成功</span>
          </div>
          <div class="main">
            <span>项目名称一</span>
            <span>项目名称dad一项目名称dad一</span>
            <span>项目项目名称dad一项目名项目项</span>
          </div>
        </div>
      </div>
    </div>-->
    <transition name="delpop">
      <delPop @close="visible = false" v-if="visible" :data="deldata" />
    </transition>

    <newProject
      :dialogFormVisible1="dialogFormVisible1"
      @close="close1"
      :item="item"
      :resdata="resdata"
      :lookOrEdit="lookOrEdit"
      :dataStructure="dataStructure"
      :codeLmlx="codeLmlx"
      :cityList="cityList"
    />
  </div>
</template>

<script>
import newProject from "./newProject";
import delPop from "@/components/delPop";

export default {
  name: "Basicinfor",
  components: {
    newProject,
    delPop,
  },
  data() {
    return {
      xmLevel: [
        {
          values: "国道",
        },
        {
          values: "省道",
        },
        {
          values: "农村公路（林下经济路）",
        },
      ],
      name: "",
      active: "",
      xzdj:"",
      lmlx:"",
      dialogFormVisible1: false,
      tableData: [],
      selectData: [],
      item: {},
      resdata: {},
      lookOrEdit: 1, // 1为新增 2为编辑 3为查看
      total: 1000,
      pageSize: 10,
      page: 1,
      loading: false,
      dataStructure: [],
      visible: false,
      deldata: {},
      codeLmlx: [],
      cityList: [],
      city: [],
      District: [], //区县
      selectleap: [],
      props: {
        lazy: true,
        lazyLoad: this.lazyLoad,
        label: "name",
        value: "adcode",
        checkStrictly: true,
      },
      gcdd_sj: null,
      gcdd_qx: null,
    };
  },
  methods: {
    selectable(row) {
      if (row.is_sealed == 1) {
        return true;
      }
    },
    elCascaderOnlick() {
      // let that = this;
      setTimeout(function () {
        document.querySelectorAll(".el-cascader-node__label").forEach((el) => {
          el.onclick = function () {
            this.previousElementSibling.click();
            // that.$refs.elcascader.dropDownVisible = false;
          };
        });
        document
          .querySelectorAll(".el-cascader-panel .el-radio")
          .forEach((el) => {
            el.onclick = function () {
              // that.$refs.elcascader.dropDownVisible = false;
            };
          });
      }, 100);
    },
    lazyLoad(node, resolve) {
      // console.log(node);
      if (node.level == 1) {
        //编辑或查看时获取县的数据
        this.$get("api/project/getDistrict", { code: node.data.adcode }).then(
          (res) => {
            if (res.code == 200 && res.data) {
              this.District = res.data;
              this.District.map((v) => {
                return (v.leaf = node.level >= 1);
              });
              resolve(this.District);
              this.elCascaderOnlick();
            }
          }
        );
      } else {
        resolve(null);
      }
    },
    formatter1(row, col) {
      if (row.xzdj == "农村公路（林下经济路）") {
        if (col.property == "yijl" || col.property == "erjl") {
          return "-";
        }
      } else {
        if (col.property == "wujl2") {
          return "-";
        }
      }
      if (!Number(row[col.property])) return 0;
      return Number(row[col.property]).toFixed(3)
        ? Number(row[col.property]).toFixed(3)
        : Number(row[col.property]);
    },
    formatter2(row, col) {
      if (!Number(row[col.property])) return 0;
      return Number(row[col.property]).toFixed(2)
        ? Number(row[col.property]).toFixed(2)
        : Number(row[col.property]);
    },
    local(item) {
      let resultData;
      // item.id
      // console.log(item);
      this.$get("/api/project/getProjectLines", { project_id: item.id }).then(
        (res) => {
          console.log(res);
          if (res.code == 200) {
            resultData = res.data ? res.data : [];
            this.$Bus.$emit("local", resultData, item.xmmc);
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            });
          }
        }
      );
      // this.$get("/api/QqBdgl/one", {
      //   bd_id: 1
      // }).then(res => {
      //   console.log(res);
      // });
    },

    Sealed(item) {
      console.log(item);
      this.$confirm("此操作将封存该项目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$get("/api/project/setProject", { id: item.id }).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: res.msg,
                type: "success",
              });
              this.search();
              let query = JSON.parse(window.localStorage.query);
              if (item.id == query.xm_id) {
                query.is_sealed = 2;
                window.localStorage.query = JSON.stringify(query);
              }
            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
            }
          });
          this.search();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消封存",
          });
        });
    },
    handleCurrentChange(value) {
      this.page = value;
      this.search();
      // this.$refs.table.scrollTop = 0;
    },
    edit(item) {
      this.item = { ...item };
      this.dialogFormVisible1 = !this.dialogFormVisible1;
      this.lookOrEdit = 2;
    },
    look(item) {
      this.dialogFormVisible1 = !this.dialogFormVisible1;
      this.item = { ...item };
      this.lookOrEdit = 3;
    },
    close1(item) {
      this.dialogFormVisible1 = false;
      if (item) {
        this.search();
        this.$Bus.$emit("refresh");
      }
    },
    handleChange() {
      this.selectleap[0] &&
        this.cityList.forEach((v) => {
          if (v.adcode == this.selectleap[0]) {
            this.gcdd_sj = v.name;
          }
        });
      this.selectleap[1] &&
        this.District.forEach((v) => {
          if (v.adcode == this.selectleap[1]) {
            this.gcdd_qx = v.name;
          }
        });
      if (this.selectleap[1]) {
        this.$refs.elcascader.dropDownVisible = false;
      }
    },
    handleSelectionChange(value) {
      this.selectData = value;
    },
    add() {
      this.item = {};
      this.lookOrEdit = 1;
      this.dialogFormVisible1 = !this.dialogFormVisible1;
    },
    del() {
      if (!this.selectData.length) {
        this.$message({
          type: "error",
          message: "没有选中的条目",
        });
        return;
      }
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$post("/api/project/deletesall", { id: this.selectData }).then(
            (res) => {
              if (res.code == 200) {
                this.deldata = res.data;
                setTimeout(() => {
                  this.visible = true;
                }, 400);
              } else {
                this.$message({
                  message: res.msg,
                  type: "error",
                });
              }
              this.search();
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    search() {
      this.loading = true;
      this.$get("/api/project/index", {
        xmmc: this.name,
        xmzt: this.active,
        page: this.page,
        gcdd_sj: this.gcdd_sj,
        gcdd_qx: this.gcdd_qx,
        lmlx:this.lmlx,
        xzdj:this.xzdj
      }).then((res) => {
        if (res.code == 200) {
          this.total = res.data.total;
          this.resdata = res.data;
          this.tableData = res.data.list;
        }
        this.$refs.table.bodyWrapper.scrollTop = 0;
        this.loading = false;
      });
      let params = this.searchs;
      this.$get("/api/users/organize", { params: params }).then((res) => {
        if (res.code == 200) {
          this.dataStructure = res.data.list;
        }
      });
    },
    exportExcel() {
      let userId = window.localStorage.userid;
      let project_ids = [];
      if (this.selectData.length > 0) {
        this.selectData.forEach(item=>{
          project_ids.push(item.id)
        })
      }
      window.open(
        `${this.$updata}/api/project/exports?xmmc=${this.name}&xmzt=${this.active}&userid=${userId}&project_ids=${project_ids.join(',')}`
      );
    },
  },
  mounted() {
    this.search();
    this.$get("/api/index/codes", { pid: 31 }).then((res) => {
      if (res.code == 200 && res.data) {
        this.codeLmlx = res.data.list;
      }
    });
    this.$get("api/project/getCitys").then((res) => {
      if (res.code == 200 && res.data) {
        this.cityList = res.data;
        console.log(this.cityList);
      }
    });
  },
};
</script>
<style lang="less">
.citylist {
  // .el-cascader-panel .el-radio {
  //   width: 100%;
  //   height: 100%;
  //   z-index: 10;
  //   position: absolute;
  //   top: 10px;
  //   right: 10px;
  //   display: hidden;
  // }
  // .el-cascader-panel .el-radio__input {
  //   visibility: hidden;
  // }
  // .el-cascader-panel .el-cascader-node__postfix {
  //   top: 10px;
  // }

  label.el-radio {
    display: none !important;
  }
  .el-icon-arrow-right.el-cascader-node__postfix {
    width: 10%;
    float: right;
  }
}
.basicinfor {
  .el-cascader .el-input .el-input__inner {
    border-radius: 0 4px 4px 0 !important;
  }
}
.el-input-group__prepend{
  padding: 0 5px;
  width: 80px;
}
</style>
<style lang="less" scoped>

.select-gray{
  width: 80px;
  text-align: center;
  padding: 0 5px;
}
.basicinfor {
  width: 100%;
  height: calc(100%);
  background: #ffffff;
  padding: 10px;
  border-radius: 5px;

  .search {
    width: 100%;
    height: 60px;
    padding: 10px 5px;
    position: relative;
    .input {
      max-width: 200px;
      margin-left: 10px;
      span {
        flex-shrink: 0;
      }
    }
  }
  .main {
    //   width: 100%;
    height: calc(92% - 60px);
    // overflow-y: scroll;
    // position: absolute
    border: 1px solid #ebeef5;
  }
}
</style>
